var data1 = [{
  text: '男',
  value: 1
}, {
  text: '女',
  value: 0
}];
var picker1El = document.getElementById("gender");
var picker1 = new Picker({
  data: [data1]
});

picker1.on('picker.select', function(selectedVal, selectedIndex) {
  picker1El.value = data1[selectedIndex[0]].text;
});
picker1El.addEventListener('click', function() {
  picker1.show();
});

// 与患者关系
var data2 = [{
  text: '其他',
  value: 0
}, {
  text: '父子',
  value: 1
}, {
  text: '母子',
  value: 1
}, {
  text: '本人',
  value: 1
}, {
  text: '父女',
  value: 1
}, {
  text: '母女',
  value: 1
}, {
  text: '夫妻',
  value: 1
}];
var picker2El = document.getElementById("relation");
var picker2 = new Picker({
  data: [data2]
});

picker2.on('picker.select', function(selectedVal, selectedIndex) {
  picker2El.value = data2[selectedIndex[0]].text;
});
picker2El.addEventListener('click', function() {
  picker2.show();
});

// 手术名称
var data3 = [{
  text: '虹膜周边切除术',
  value: 0
}, {
  text: '手术1',
  value: 1
}, {
  text: '手术2',
  value: 1
}, {
  text: '手术3',
  value: 1
}, {
  text: '手术4',
  value: 1
}];
var picker3El = document.getElementById("operationName");
var picker3 = new Picker({
  data: [data3]
});

picker3.on('picker.select', function(selectedVal, selectedIndex) {
  picker3El.value = data3[selectedIndex[0]].text;
});
picker3El.addEventListener('click', function() {
  picker3.show();
});
// 选择日期
// $(function() {
var currYear = (new Date()).getFullYear();
var opt = {};
opt.date = { preset: 'date' };
opt.datetime = { preset: 'datetime' };
opt.time = { preset: 'time' };
opt.default = {
  theme: 'android-ics light', //皮肤样式
  display: 'modal', //显示方式 
  mode: 'scroller', //日期选择模式
  dateFormat: 'yyyy-mm-dd',
  lang: 'zh',
  showNow: true,
  nowText: "今天",
  startYear: currYear - 100, //开始年份
  endYear: currYear, //结束年份
  onSelect: function() {
    console.log(222);
  }
};

// $("#USER_AGE").mobiscroll($.extend(opt['date'], opt['default']));

// });

// 选择患者

$(".patient").click(function() {
  $(".user").css({ "transform": "translateY(0)" });
});
$(".user li").click(function() {
  $(".user").css({ "transform": "translateY(100%)" });
  $(".patient input").val($(this).find(".name").text());
});
$(".user").click(function() {
  $(".user").css({ "transform": "translateY(100%)" });
});

// 根据疾病选医生
$(".category div").click(function(e) {
  e = e || window.event;
  e.stopPropagation();
  var flag = $(".panelWrap").attr("flag");
  if (flag == "false") {
    $(".panelWrap").css({ "bottom": "-15rem", "display": "block" }).animate({ "bottom": "0.8rem" });
    $(".panel").css({ "transform": 'translateY(0)' });
    $(".panelWrap").attr("flag", "true");
  } else {
    hidenPanelWrap();
  }
});

var province = "浙江";
var city = "杭州";
var dataCache = {};

function getCity(lastDataHeight) {
  var data = [{
      "city": "周口2",
      "num": "20家"
    },
    {
      "city": "郑州2",
      "num": "20家"
    },
    {
      "city": "上水",
      "num": "20家"
    },
    {
      "city": "漯河",
      "num": "20家"
    },
    {
      "city": "开封",
      "num": "20家"
    },
    {
      "city": "平顶山",
      "num": "20家"
    },
    {
      "city": "驻马店",
      "num": "20家"
    },
  ];
  dataCache[province] = data;
  move(dataCache[province], lastDataHeight);
}

function move(data, lastDataHeight) {
  var html = "<ul>";
  data.forEach(function(item) {
    var li = "<li><span >" + item.city + "</span><b>" + item.num + "</b></li>";
    html += li;
  });
  html += "</ul>";
  $(".panel0 .city").append(html);
  $(".panel0 .city").animate({ top: -lastDataHeight }, function() {
    $(".panel0 .city").children("ul").eq(0).remove();
    $(".panel0 .city").css({ "top": 0 });
  });
};

// province 
$(".panel0 .province li").click(function(e) {
  e = e || window.event;
  e.stopPropagation();
  var lastDataHeight = $(".panel0 .city ul").eq(0).height();
  province = $(this).html();
  $(this).addClass("active").siblings().removeClass("active");
  if (dataCache[province]) {
    move(dataCache[province], lastDataHeight);
  } else {
    getCity(lastDataHeight);
  }
});

//  面板消失
function hidenPanelWrap() {
  $(".panelWrap").animate({ "bottom": "-15rem" }, function() {
    $(".panelWrap").css({ "display": "none" });
  });
  // $(".positionWrap").animate({ "top": "20rem" });
  $(".panelWrap").attr("flag", "false");
  $(".panel").css({ "transform": 'translateY(100%)' });
  // $(".positionWrap").attr("flag", "false");
}

$(".panel0 .city").on("click", "li", function() {

  $(this).addClass("active").siblings().removeClass("active");
  city = $(this).children("span").html();
  // $(".currentPositionCity").html(province + " " + city );
  $(".currentPosition span").html(city);
  hidenPanelWrap();
});

$(".panel1 ").on("click", "li", function() {
  var hospital = $(this).html();
  $(this).addClass("active").siblings().removeClass("active");
  hidenPanelWrap();
});
// 选择医生

$(".selectMe span").click(function() {
  var doctor = $(this).parents("li").find("h3").text();
  console.log(doctor);
  $('.operationDoctor').val(doctor);
  $(".doctorList").css({ "transform": "translateY(100%)" });
});
$(".operationDoctor").click(function() {
  $(".doctorList").css({ "transform": "translateY(0)" });
});
$(".doctorList .top i").click(function() {
  $(".doctorList").css({ "transform": "translateY(100%)" });
});
//选择预约时间
$(".selectAppointmentTime").click(function() {
  $(".appointmentTime").css({ "transform": "translateY(0)" });
});
$(".appointmentTime .address span").click(function() {
  $(".appointmentTime").css({ "transform": "translateY(100%)" });
  var when = $(this).parents("li").find(".fullTime").text();
  $(".selectAppointmentTime").val(when);
});